<template>
  <div id="app">
    <headnavbar>
      <!-- #left 语法糖 等同于 name="left" -->
      <template #left>
        <router-link to="/Community/all">
          <div class="all">全部</div>
        </router-link>
      </template>

      <template #center>
        <router-link to="/Community/new">
          <div class="new">最新</div>
        </router-link>
      </template>

      <template #right>
        <router-link to="/Community/essence">
          <div class="good">精华</div>
        </router-link>
      </template>

      <template #edit>
        <router-link to="/edit">
          <span class="edit"></span>
        </router-link>
      </template>
    </headnavbar>

    <!-- 中间内容区域 -->
    <router-view> </router-view>
    <div class="kongbai"></div>
  </div>
</template>
<script>
import headnavbar from "../../components/HeadNavBar";
export default {
  data() {
    return {};
  },

  components: {
    headnavbar
  }
};
</script>
<style scoped>
a {
  color: gray !important;
  font-size: 16px;
  margin: 5%;
}
#app {
  background-color: #f0eff5;
}
.router-link-exact-active {
  color: #fff !important;
  position: relative;
}

.router-link-exact-active::after {
  width: 100%;
  height: 2px;
  display: block;
  content: "";
  background: #00aeff;
  position: absolute;
  bottom: -73%;
}

.sechead {
  justify-content: center !important;
}

.edit {
  width: 22px;
  height: 22px;
  display: block;
  color: #797979;
  background: url("./imgs/edit.png") no-repeat;
  /* margin-left: 240%; */
}
.kongbai {
  height: 50px;
  background-color: #f3f3f3;
}
</style>
